<template>
  <Layout ref="load" class="microshop-category">
    <div class="head-search">
      <div class="left-icon e-handle" @click="onBack">
        <van-icon name="arrow-left" />
      </div>
      <div class="search" @click="toSearch('microshopchoose')">
        <van-search disabled placeholder="请输入关键词"></van-search>
      </div>
    </div>

    <div class="category-view">
      <section class="category">
        <div class="nav">
          <div
            class="item"
            v-for="(item,index) in items"
            :key="index"
            :class="activeKey == index ? 'active' : ''"
            @click="activeKey = index"
          >
            <span class="nav-item-text">{{item.short_name ? item.short_name : item.category_name}}</span>
          </div>
        </div>
        <div class="content">
          <div class="item" v-for="(item,index) in content" :key="index">
            <div class="item-head">
              <span
                class="e-handle"
                @click="toList(item.category_id,item.short_name ? item.short_name : item.category_name)"
              >{{item.short_name ? item.short_name : item.category_name}}</span>
            </div>
            <div class="item-main">
              <div class="item-child" v-for="(child,index) in item.third_category" :key="index">
                <div
                  class="item-box e-handle"
                  @click="toList(child.category_id,child.short_name ? child.short_name : child.category_name)"
                >
                  <div class="iamges">
                    <img v-lazy="child.category_pic" :key="child.category_pic" pic-type="square" />
                  </div>
                  <div class="name">{{child.short_name ? child.short_name : child.category_name}}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  </Layout>
</template>

<script>
import sfc from "@/utils/create";
import { Search } from "vant";
import { GET_GOODSCATEGORY } from "@/api/microshop";
import HeadSearch from "@/components/HeadSearch";
export default sfc({
  name: "microshop--choosecategory",
  data() {
    return {
      activeKey: 0,
      items: []
    };
  },
  computed: {
    content() {
      return this.items[this.activeKey]
        ? this.items[this.activeKey].second_category
        : [];
    }
  },
  mounted() {
    const $this = this;
    GET_GOODSCATEGORY()
      .then(({ data }) => {
        $this.items = data;
        $this.$refs.load.success();
      })
      .catch(() => {
        $this.$refs.load.fail();
      });
  },
  methods: {
    toList(id, name) {
      this.$router.push({
        path: "/microshop/choosegoods/list",
        query: {
          category_id: id,
          text: name
        }
      });
    },
    onBack() {
      this.$router.back();
    },
    toSearch(type) {
      this.$router.push({
        path: "/search",
        query: {
          type
        }
      });
    }
  },
  components: {
    HeadSearch,
    [Search.name]: Search
  }
});
</script>

<style scoped>
.head-search {
  height: 46px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #f5f5f5;
}
.head-search .left-icon {
  width: 50px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.head-search .left-icon .van-icon {
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  font-size: 16px;
  font-weight: 800;
  color: #666;
}
.head-search .search {
  height: 46px;
  width: 100%;
  overflow: hidden;
}

.head-search .search >>> .van-search {
  padding: 8px 15px 8px 0px;
  background: none !important;
}

.head-search .search >>> .van-search .van-cell {
  padding: 3px 10px;
  border-radius: 2px;
  background: #f5f5f5;
}

.microshop-category {
  height: 100vh;
  min-height: 100vh !important;
}
.microshop-category >>> .category-view {
  width: 100%;
  height: calc(100% - 46px);
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  position: relative;
}

.microshop-category >>> .category {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.microshop-category >>> .category .nav {
  height: 100%;
  background-color: #f8f8f8;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
  z-index: 1;
  width: 90px;
}

.microshop-category >>> .category .nav .item {
  color: #333;
  display: flex;
  align-items: center;
  height: 46px;
  justify-content: center;
  position: relative;
}

.microshop-category >>> .category .nav .item.active .nav-item-text::before {
  content: "";
  position: absolute;
  display: block;
  width: 2px;
  height: 16px;
  background: #ff454e;
  left: 0;
  top: 50%;
  margin-top: -8px;
}

.microshop-category >>> .category .nav .item.active {
  color: #ff454e;
  background: #fff;
}

.microshop-category >>> .category .content {
  height: 100%;
  background-color: #fff;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  position: relative;
}

.microshop-category >>> .category .content .item {
  margin: 4px 4px 20px;
}

.microshop-category >>> .category .content .item .item-head {
  color: #58595b;
  font-weight: 800;
  display: flex;
  align-items: center;
  height: 38px;
  padding: 0 5px;
}
.microshop-category >>> .category .content .item .item-head span {
  padding: 6px 10px;
}

.microshop-category >>> .category .content .item .item-main {
  overflow: hidden;
}

.microshop-category >>> .category .content .item .item-main .item-child {
  width: 33.333334%;
  float: left;
  text-align: center;
}

.microshop-category
  >>> .category
  .content
  .item
  .item-main
  .item-child
  .item-box {
  margin: 4px;
}

.microshop-category
  >>> .category
  .content
  .item
  .item-main
  .item-child
  .iamges {
  height: 0;
  width: 100%;
  padding: 50% 0;
  overflow: hidden;
  background: #f9f9f9;
}

.microshop-category
  >>> .category
  .content
  .item
  .item-main
  .item-child
  .iamges
  img {
  display: block;
  width: 100%;
  margin-top: -50%;
  background-color: #fff;
  border: none;
}

.microshop-category >>> .category .content .item .item-main .item-child .name {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  padding: 6px 4px 8px;
}
</style>
